<section class="channel-h5">
  <div class="channel-h5__header">
    <p class="channel-h5__title">重磅推荐<i>推</i></p>
    <div class="tab">
      <a href="" class="tab_on">男</a> <a href="" class="tab_on">女</a>
    </div>
  </div>
  <ul class="list-h5">
    <li v-if="index === 0" v-for="(item,index) in hot" :key="item.id">
      <div class="book-h5">
        <div class="book-h5__cover">
          <img
            :src="item.cover" :alt="item.title"
          />
          <p class="book-h5__finish">{{item.finish ? '完结' : ''}}</p>
        </div>
        <div class="book-h5__info">
          <div class="book-h5__title">{{item.title}}</div>
          <div class="book-h5__author">{{item.authors}}</div>
          <div class="book-h5__summary">{{item.summary}}</div>
          <div class="book-h5__tag" v-for="tag in item.tags" :key="tag.key">{{tag}}</div>
        </div>
      </div>
    </li>
    <li class="li_no_img" v-for="(item,index) in hot" :key="item.id" v-if="index > 0 && index < 9">
      <div class="book-h5 book-h5__no-img">
        <span class="book-h5_no-img__order">0{{index}}</span>
        <div class="book-h5_no-img__info">
          <p class="book-h5_no-img__title">{{item.title}}</p>
          <p class="book-h5_no-img__summary" v-if="false">{{item.summary}}</p>
        </div>
      </div>
    </li>
  </ul>
</section>
